function render(trackVOList) {
    var tbody = document.querySelector("tbody")
    // 遍历所有音频列表
    for (var i in trackVOList) {
        var ListTrackVO = trackVOList[i]
        var html = `<tr><td>${ListTrackVO.tid}</td><td>${ListTrackVO.title}</td><td>${ListTrackVO.refCount}</td></tr>`
        tbody.innerHTML += html
    }
}

function renderNonLogin() {
    document.querySelector('.who').textContent += '必须登录后才能使用'
}

function renderLogin(currentUser) {
    document.querySelector('.who').textContent += currentUser.username
}

function renderPagination(paginationView) {
    var currentPage = parseInt(paginationView.currentPage)
    document.querySelector('.prevPage').href += (currentPage === 1 ? paginationView.totalPage : currentPage - 1)
    document.querySelector('.countPerPage').textContent = paginationView.countPerPage
    document.querySelector('.currentPage').textContent = paginationView.currentPage
    document.querySelector('.totalPage').textContent = paginationView.totalPage
    document.querySelector('.nextPage').href += (currentPage === paginationView.totalPage ? 1 : currentPage + 1)
    document.querySelector('.lastPage').href += paginationView.totalPage
}

// 为了让所有js代码，在所有元素加载完成之后再指向，将入口代码放在window的onload时间后执行
window.onload = function () {
    // 1.发起ajax请求
    var xhr = new XMLHttpRequest()
    xhr.open("get", "/studio/track/list.json" + location.search) // 对json的请求从这里发起
    xhr.onload = function () {
        if (xhr.status !== 200) {
            alert("数据获取错误，请稍后重试！")
            return
        }
        // 2.增加调试信息
        console.log(this.responseText)
        // 3.尝试使用json进行解析
        var data = JSON.parse(this.responseText)
        if (!data.currentUser) {
            // 没有登录
            renderNonLogin()
            return
        }

        renderLogin(data.currentUser)
        renderPagination(data.paginationView)
        render(data.trackVOList)
    }
    xhr.send()
}